<template>
  <div class="box">
       <div><img src="../imgs/logo1.png" alt=""></div>
      <div class="register"> 
        <div class="title">登录页</div>
        <div class="block">
        <input type="text" placeholder="输入手机号" required="required" name='shouji' >
        </div>
        <div class="block">
        <input type="password" placeholder="输入密码" required  name="mima" >
        </div>

        <div class="block1">
            <input type="button" value="登录" class="zc" @click="handleClick1()">
        </div>
     </div>
      
  </div>
 


</template>

<script setup lang='ts'>
   import {reactive, ref} from 'vue'
     import { useRouter } from 'vue-router'
    var router = useRouter();
//    var a = ref('')
//    var b =ref('')
// var a =reactive({
//     phone:'',
//     pass:''
// })

// var a = reactive({list :[]})
// var b = reactive({list :[]})

  
  var handleClick1=(a)=>{
         router.push('/index/home/hwj/homepage')
    // if (a.phone=='1' ){
    //     console.log(a.list);
    //     console.log(a);
    //   router.push('/index/home/hwj/homepage')
    // }else{
    //     alert('手机号密码错误，请重新输入！')
    // }

  
  }
  
</script>

<style>
.box{
    /* background: url("../imgs/logo1.png") no-repeat 100% ; */
    /* width: 2000px;
    height: 1000px; */
display: flex;
}
.box img{
  
}
    .title {
        font-size: 38px;
    }

    .register {
        width: 500px;
        margin-top: 300px;
        height: 810px;
        text-align: center;
      
        margin: auto;
        /* border: 1px solid black; */
      background: lightblue;
    }

    .register .title {
        font-weight: bold;
        text-align: center;
        line-height: 40px;
        margin-top: 260px;
        

    }

    .register .block {
        margin: 20px 0;
    }

    .register .block input {
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding-left: 20px;
        box-sizing: border-box;
        outline: none;
        width: 100%;
    }

    .block1 .zc {
        width: 200px;
        border-radius: 20px;
        height: 50px;
        font-size: 28px;
        background: #ccc;
    }
</style>












